<template>
	<div class="in-form-designer user-background">
		<div class="content">
			<div class="item left">
				<controls v-model="formData" />
			</div>
			<div class="item middle">
				<designer v-model="formData" />
			</div>
			<div class="item right">
				<attributes v-model="formData" />
			</div>
		</div>
	</div>
</template>

<script setup>
import controls from "./controls";
import designer from "./designer";
import attributes from "./attributes";
import { formAttribute } from "../configure";
const formData = reactive({ attribute: formAttribute, form: [] });
document.body.ondrop = e => {
	e.preventDefault();
	e.stopPropagation();
};
</script>
<style>
@import '../theme/index.scss';
</style>
<style scoped>
.in-form-designer {
	.content {
		height: 100%;
		width: 100%;
		overflow: hidden;
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;

		.item.left {
			flex-grow: 0;
		}

		.item.middle {
			flex-grow: 1;
			margin: 0 1px;
			overflow: hidden;
		}

		.item.right {
			flex-grow: 0;
		}
	}
}
</style>